<template>
  <div class="seek_help">
    <head-top head-title='邻里求助' go-back="true" seek-publish="发布"></head-top>
    <!--<head-top head-title='邻里求助' go-back="true" seek-publish="发布" @seekPublish="goHelp"></head-top>-->
    <ul>
      <li class="border-bottom-last" v-for="(list,index) in detail" :key="index">
        <router-link :to="'/home/HelpDetail/'+list.id" tag="div" class="wrapper">
          <div class="img1">
            <div v-show="list.img[0]" class="img" v-lazy:background-image="`${list.img[0]}`"></div>
            <img v-show="!list.img[0]" src="../../assets/imgDefault.png" alt="">
          </div>
          <div class="help_word">
            <div class="h3">{{list.title}}</div>
            <p>{{list.content}}</p>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="default" v-show="!detail.length && !noResult">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult">
      <p>抱歉！暂无数据</p>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .seek_help {
    width: 100%;
    padding-top: 40px;
    ul {
      li {
        margin: 0 10px;
        .wrapper {
          padding: 10px 0;
          display: flex;
          align-items: center;
          .img1 {
            flex: 0 0 50px;
            width: 50px;
            height: 50px;
            background: #f2f2f2;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .help_word {
            flex: 1;
            margin-left: 10px;
            .h3 {
              margin-bottom: 10px;
              font-size: 14px;
              color: #292929;
            }
            p {
              @include ellipsis(1);
              line-height: 18px;
              color: #666;
            }
          }
          .img2 {
            width: 10px;
            height: 17px;
          }
        }
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/loading.gif") no-repeat;
      background-size: 40px 40px;
      background-position: center;
      padding-bottom: 100px;
      p {
        font-size: 15px;
        color: #666;
        margin-top: 100px;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { Toast } from 'mint-ui'
  import { gethelpDetail } from '../../api/publishList.js'

  export default {
    name: 'SeekHelp',
    data () {
      return {
        lists: [],
        noResult: false,
        isFirstEnter: false
      }
    },
    components: {
      headTop
    },
    created() {
      this.isFirstEnter = true
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'HelpDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this._gethelpDetail()
      }
      this.$route.meta.isBack = false
      this.isFirstEnter = false
    },
    methods: {
      _gethelpDetail () {
        this.noResult = false
        gethelpDetail().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.lists = res.data
          }
          if (this.lists.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      }
    },
    computed: {
//    使最新发布的数据排在最前面
      detail () {
        if (this.lists.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.lists.reverse()
        }
      }
    }
  }
</script>
